<template>
  <div class="container">
    <el-card class="box-card" v-loading="loading">
      <div class="header">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          @click="$router.push('/questions/new')"
          size="mini"
          >新增试题</el-button
        >
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 第一列 -->
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="学科" prop="subjectID">
                <el-select
                  class="input"
                  v-model="ruleForm.subjectID"
                  placeholder="请选择"
                  @change="simpleChange"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in simpleList"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="二级目录" prop="catalogID">
                <el-select
                  class="input"
                  v-model="ruleForm.catalogID"
                  placeholder="请选择"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in subjectList"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="标签" prop="tags">
                <el-select
                  class="input"
                  v-model="ruleForm.tags"
                  placeholder="请选择"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in tagsList"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="关键字" prop="keyword">
                <el-input
                  v-model="ruleForm.keyword"
                  placeholder="根据题干搜索"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>

        <!-- 第二列 -->
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="试题类型" prop="questionType">
                <el-select
                  class="input"
                  v-model="ruleForm.questionType"
                  placeholder="请选择"
                >
                  <el-option label="" value="简单"></el-option>
                  <el-option label="" value="多选"></el-option>
                  <el-option label="" value="简答"></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="难度" prop="difficulty">
                <el-select
                  class="input"
                  v-model="ruleForm.difficulty"
                  placeholder="请选择"
                >
                  <el-option label="" value="简单"></el-option>
                  <el-option label="" value="一般"></el-option>
                  <el-option label="" value="困难"></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="方向" prop="direction">
                <el-select
                  class="input"
                  v-model="ruleForm.direction"
                  placeholder="请选择"
                >
                  <el-option label="" value="o2o"></el-option>
                  <el-option label="" value="外包服务"></el-option>
                  <el-option label="" value="企业服务"></el-option>
                  <el-option label="" value="互联网金融"></el-option>
                  <el-option label="" value="企业咨询"></el-option>
                  <el-option label="" value="互联网"></el-option>
                  <el-option label="" value="电子商务"></el-option>
                  <el-option label="" value="其他"></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="录入人" prop="creatorID">
                <el-select
                  class="input"
                  v-model="ruleForm.creatorID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in creatorList"
                    :key="item.id"
                    :label="item.permission_group_title"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
        </el-row>

        <!-- 第三列 -->
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="题目备注" prop="remarks">
                <el-input v-model="ruleForm.remarks"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="企业简称" prop="shortName">
                <el-input v-model="ruleForm.shortName"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="城市" prop="region">
                <el-select
                  class="input1"
                  v-model="ruleForm.province"
                  @change="provinceChange"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in provinces"
                    :key="index"
                    label=""
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select v-model="ruleForm.city" placeholder="请选择">
                  <el-option
                    label=""
                    :value="item"
                    v-for="(item, index) in cityList"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item style="float: right">
                <el-button @click="resetForm" size="small">清除</el-button>
                <el-button type="primary" size="small" @click="submitForm"
                  >搜索</el-button
                >
              </el-form-item>
            </div></el-col
          >
        </el-row>
      </el-form>

      <!-- 数据 -->
      <div class="datatips">
        <i class="el-icon-warning"></i>
        <span>数据一共{{ counts }}条</span>
      </div>
      <!-- 选项卡 -->
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" @click="getSimple()" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" @click="cutTable(0)" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 表单 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column fixed prop="number" label="试题编号">
        </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          :formatter="formatQuestionType"
        >
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干"
          width="200"
          #default="{ row }"
        >
          <div v-html="row.question"></div>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          :formatter="formatAddDate"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          :formatter="formatDifficulty"
        >
        </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column
          prop="chkState"
          label="审核状态"
          :formatter="formatChkState"
        >
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见"> </el-table-column>
        <el-table-column prop="chkUser" label="审核人"> </el-table-column>
        <el-table-column
          prop="publishState"
          label="发布状态"
          :formatter="formatPublishState"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="preview(row.id)"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="disabled(row)"
              @click="audit(row.id)"
              >审核</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="$router.push(`/questions/new?id=${row.id}`)"
              :disabled="delDisabled(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handlePublish(row)"
              v-text="PublishState(row)"
            ></el-button>
            <el-button
              type="text"
              size="small"
              @click="del(row.id)"
              :disabled="delDisabled(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="q.pagesize"
        layout="->, prev, pager, next,sizes, jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>

    <!-- 预览弹出层 -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      @close="close"
      width="45%"
    >
      <el-row :gutter="20">
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【题型】:{{ formatQuestionType1(previewList.questionType) }}
          </div></el-col
        >
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【编号】:{{ previewList.id }}
          </div></el-col
        >
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【难度】:{{ formatDifficulty1(previewList.difficulty) }}
          </div></el-col
        >
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【便签】:{{ previewList.tags }}
          </div></el-col
        >
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【学科】:{{ previewList.subjectName }}
          </div></el-col
        >
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【目录】:{{ previewList.directoryName }}
          </div></el-col
        >
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【方向】:{{ previewList.direction }}
          </div></el-col
        >
      </el-row>
      <hr />
      <span>【题干】:</span>
      <br />
      <div v-html="previewList.question" style="color: #4b4bff"></div>

      <div v-if="+previewList.questionType === 1">
        <span style="marginright: 8px">单选题</span>
        <span style="marginright: 8px"> 选项:</span>
        <span> (以下选中的选项为正确答案)</span>
        <div>
          <el-radio
            class="radio"
            :value="previewRadio"
            :label="item.id"
            v-for="item in previewList.options"
            :key="item.id"
            >{{ item.title }}</el-radio
          >
        </div>
      </div>
      <div v-else-if="+previewList.questionType === 2">
        <span style="marginright: 8px">多选题</span>
        <span style="marginright: 8px"> 选项:</span>
        <span> (以下选中的选项为正确答案)</span>
        <el-checkbox-group :value="checkList">
          <el-checkbox
            class="radio"
            v-for="item in previewList.options"
            :key="item.id"
            :label="item.id"
            >{{ item.title }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div v-else>
        <span>{{ formatQuestionType1(previewList.questionType) }}</span>
        <span style="marginright: 8px">多选题</span>
      </div>

      <hr />
      <div>
        <span>【参考答案】:</span>
        <el-button type="danger" size="mini" @click="videoShow = true"
          >视频答案预览</el-button
        >
        <br />
        <video v-if="videoShow" :src="previewList.videoURL" controls></video>
      </div>
      <hr />
      <span style="marginright: 5px">【答案解析】:</span>
      <div style="display: inline-block" v-html="previewList.answer"></div>
      <hr />
      <span>【题目备注】: {{ previewList.remarks }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close()">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 审核弹出框 -->
    <el-dialog
      title="题目审核"
      :visible.sync="dialogFrom"
      width="20%"
      @close="FromClose"
    >
      <el-form
        :model="auditForm"
        :rules="auditRules"
        ref="auditForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="chkState">
          <el-radio-group v-model="auditForm.chkState">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="chkRemarks">
          <el-input
            type="textarea"
            v-model.trim="auditForm.chkRemarks"
            placeholder="请输入审核意见"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="FromClose">取 消</el-button>
        <el-button type="primary" @click="submitFrom()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { difficulty, questionType, publishType } from '../../api/hmmm/constants'
import { simple } from '../../api/hmmm/subjects'
import { list as userList } from '../../api/base/users'
import { provinces, citys } from '../../api/hmmm/citys'
import { parseTime } from '../../utils'
import { simple as subjectSimple } from '../../api/hmmm/directorys'
import { simple as tagsSimple } from '../../api/hmmm/tags'
import {
  choiceCheck,
  choice,
  remove,
  detail as detailQuestions,
  choicePublish
} from '../../api/hmmm/questions'
export default {
  data () {
    return {
      loading: false,
      tagsList: [],
      subjectList: [],
      auditForm: {
        chkState: '',
        chkRemarks: '',
        id: 0
      },
      auditRules: {},
      dialogFrom: false,
      videoShow: false,
      dialogVisible: false,
      q: {
        page: 1,
        pagesize: 10
      },
      ruleForm: {
        subjectID: null, // 学科
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        keyword: null, // 关键字
        province: null, // 企业所在省份
        city: null, // 企业所在城市
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        tags: null,
        catalogID: null
      },
      rules: {},
      simpleList: [],
      creatorList: [],
      provinces: provinces(),
      cityList: [],
      counts: 0,
      list: [],
      activeName: 'all',
      previewList: []
    }
  },
  created () {
    this.getSimple()
    this.getUser()
    this.render()
  },
  methods: {
    // 获取精选题库列表

    // 获取学科列表
    async getSimple () {
      const { data } = await simple()
      this.simpleList = data
    },
    // 获取录入人
    async getUser () {
      const {
        data: { list }
      } = await userList()
      this.creatorList = list
    },
    // 上级城市变化 获得下次城市
    provinceChange () {
      const res = citys(this.ruleForm.province)
      this.ruleForm.city = ''
      this.cityList = res
    },
    // 重置表单
    resetForm () {
      this.$refs.ruleForm.resetFields()
      this.ruleForm.province = null
      this.ruleForm.city = null
      this.tagsList = []
      this.subjectList = []
    },
    // 表单提交
    submitForm () {
      this.q = { ...this.q, ...this.ruleForm }
      this.q.page = 1
      this.render()
    },
    formatQuestionType (row, column, cellValue, index) {
      const res = questionType.find((item) => item.value === +cellValue)
      return res ? res.label : '未知'
    },
    formatDifficulty (row, column, cellValue, index) {
      const res = difficulty.find((item) => item.value === +cellValue)
      return res ? res.label : '未知'
    },
    // 选项卡切换
    async handleClick () {
      if (this.activeName !== 'all') {
        const { data } = await choice({
          ...this.q,
          chkState: +this.activeName
        })
        this.counts = data.counts
        this.q.page = +data.page
        this.q.pagesize = +data.pagesize
        this.list = data.items
      } else {
        this.render()
      }
    },
    handleSizeChange (pagesize) {
      this.q.pagesize = pagesize
      this.q.page = 1
      this.render()
    },
    // 分页跳转
    handleCurrentChange (page) {
      this.q.page = page
      this.render()
    },
    // 删除
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示')
        .then(async () => {
          if (this.list.length === 1 && this.q.page > 1) {
            this.q.page--
          }
          await remove({ id })
          this.$message.success('删除成功')
          this.render()
        })
        .catch(() => {})
    },
    // 渲染数据
    async render () {
      this.loading = true
      if (this.activeName !== 'all') {
        const { data } = await choice({
          ...this.q,
          chkState: +this.activeName
        })
        this.counts = data.counts
        this.q.page = +data.page
        this.q.pagesize = +data.pagesize
        this.list = data.items
      } else {
        const { data } = await choice({ ...this.q })
        this.counts = data.counts
        this.q.page = +data.page
        this.q.pagesize = +data.pagesize
        this.list = data.items
      }
      this.loading = false
    },
    // 预览
    async preview (id) {
      this.dialogVisible = true
      const { data } = await detailQuestions({ id })
      this.previewList = data
      if (+this.previewList.questionType === 1) {
        const res = this.previewList.options.find((item) => {
          return item.isRight === 1
        })
        this.previewRadio = res.id
      } else if (+this.previewList.questionType === 2) {
        this.previewList.options.forEach((item) => {
          if (item.isRight === 1) {
            this.checkList.push(item.id)
          }
        })
      }
    },
    // 格式化难度
    formatDifficulty1 (value) {
      const res = difficulty.find((item) => item.value === +value)
      return res ? res.label : '未知'
    },
    // 格式化题目类型
    formatQuestionType1 (value) {
      const res = questionType.find((item) => item.value === +value)
      return res ? res.label : '未知'
    },
    // 关闭弹窗
    close () {
      this.videoShow = false
      this.dialogVisible = false
    },
    // 上下架
    handlePublish (row) {
      const text = row.publishState === 0 ? '上架' : '下架'
      const num = row.publishState === 1 ? 0 : 1
      this.$confirm(`您确认${text}这道题目吗?`, '嘤嘤嘤')
        .then(async () => {
          await choicePublish({ id: row.id, publishState: num })
          if (text === '上架') {
            this.$message.success('上架成功')
          } else {
          }
          this.render()
        })
        .catch(() => {})
    },
    // 修改上下架文本
    PublishState (row) {
      return row.publishState === 0 ? '上架' : '下架'
    },
    // 审核 禁用功能
    disabled (row) {
      return row.chkState !== 0
    },
    // 审核点击
    audit (id) {
      this.dialogFrom = true
      this.auditForm.id = id
    },
    // 审核弹出框关闭
    FromClose () {
      this.dialogFrom = false
      this.auditForm = {
        chkState: 0,
        chkRemarks: '',
        id: 0
      }
    },
    // 审核弹出框提交
    async submitFrom () {
      if (!this.auditForm.chkRemarks) {
        return this.$message.warning('请输入审核意见')
      }
      await choiceCheck({
        ...this.auditForm,
        chkState: +this.auditForm.chkState
      })
      this.$message.success('操作成功')
      this.FromClose()
      this.render()
    },
    // 删除 禁用 上架就不能删
    delDisabled (row) {
      if (row.publishState === 1) {
        return true
      }
      return false
    },
    // 格式化审核状态
    formatChkState (row, column, cellValue, index) {
      if (cellValue === 0) {
        return '待审核'
      } else if (cellValue === 1) {
        return '通过'
      } else {
        return '拒绝'
      }
    },
    // 格式化时间
    formatAddDate (row, column, cellValue, index) {
      return parseTime(cellValue)
    },
    // 获取二级目录和便签
    async simpleChange () {
      const { data } = await subjectSimple({
        subjectID: this.ruleForm.subjectID
      })
      this.subjectList = data
      const { data: tags } = await tagsSimple({
        subjectID: this.ruleForm.subjectID
      })
      this.tagsList = tags
    },
    // 格式化上架状态
    formatPublishState (row, column, cellValue, index) {
      const res = publishType.find((item) => item.value === +cellValue + 1)
      return res ? res.label : '未知'
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin: 10px;
  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    span {
      font-size: 12px;
      color: pink;
    }
  }
}
.input {
  width: 100%;
}

::v-deep .el-form-item__content {
  display: flex;
}
.input1 {
  margin-right: 5px;
}
.datatips {
  background-color: #f4f4f5;
  margin-bottom: 15px;
  color: #909399;
  padding: 8px 16px;
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  span {
    font-size: 13px;
    line-height: 18px;
    margin-left: 10px;
  }
}
.btn {
  width: 32px;
  height: 32px;
  padding: 8px;
  ::v-deep i {
    font-size: 12px;
  }
}
.col {
  padding: 10px 0;
}
.radio {
  display: block;
  margin: 15px 0;
}
video {
  width: 400px;
  height: 300px;
}
</style>
